<template>
  <!-- 先用一个大概的划一下布局 -->
  <div class="main-layout">
    <!-- 导航栏 -->
    <app-navigator></app-navigator>

    <!-- 页面主要内容 白底的部分 -->
    <div class="main-layout-page-container primary-shadow">
      <slot></slot>
    </div>

    <div class="app-footer">
      <a class="app-footer-link" href="javascript:;" @click="aboutVisible = true">关于及贡献人员</a>
      <p class="app-footer-text">本站为黑桃影粉丝作品，与@黑桃影本人没有关联！</p>
      <p class="app-footer-text">Echo Button Production Committee 2019-2020.</p>

      <el-dialog
        title="关于"
        :visible.sync="aboutVisible"
        width="50%">
        <about-content class="about-text"></about-content>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="aboutVisible = false">关闭</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="吃人启示"
        :visible.sync="recruitVisible"
        width="50%">
        <recruit-content class="about-text"></recruit-content>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="recruitVisible = false">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import AppNavigator from '@/components/AppNavigator'
import AboutContent from '@/components/AboutContent'
import RecruitContent from '@/components/RecruitContent'

export default {
  name: 'MainLayout',
  components: {
    AppNavigator,
    AboutContent,
    RecruitContent
  },
  data() {
    return {
      aboutVisible: false,
      recruitVisible: false
    }
  }
}
</script>

<style>
.main-layout-page-container {
  width: 1110px;
  min-height: calc(100vh - 150px);
  margin: 15px auto;
  border-radius: 12px;
  background-color: #fff;
}
.app-footer {
  box-sizing: border-box;
  padding: 12px 0;
  background-color: #ffa6c6;
  font-size: 14px;
}
.app-footer-link {
  color: #2c3e50;
  font-weight: bold;
}
.app-footer-text {
  margin: 12px 0 0;
}
.about-text {
  white-space: pre-wrap;
  text-align: center;
  line-height: 1.1em;
}
.about-text p {
  margin: 4px 0;
}

/* 1134 = 1030 + 40 * 2 + 12 * 2 */
@media screen and (max-width: 1134px) {
  .main-layout-page-container {
    /* 这种写法会稍微在1140px左右大约20像素以内稍微有点不太好看 但没有溢出 暂时先这样 */
    width: calc(100% - 24px);
  }
}
</style>
